<template>
  <div>
    <div class="search">
      <input
        class="search-input"
        type="text"
        placeholder="请输入城市名或拼音"
        v-model="keyword"
      >
      <!--:placeholder=getCity-->
    </div>
    <div class="search-content" v-show="keyword" ref="wrapper">
      <ul>
        <li class="item-li border-bottom" v-for="item in list" @click="handleCityclick(item.name)">{{item.name}}</li>
      </ul>
      <div class="item-li " v-show="!list.length">没有找到您搜索的城市</div>
    </div>
  </div>

</template>

<script>
  import Bscroll from 'better-scroll'
  import {mapState,mapMutations} from 'vuex'
    export default {
        name: "Search",
        data(){
            return {
              list:'',
              keyword:'',
             // getCity:''
            }
        },
        props:{
          cities:Object
        },
        methods:{
             trim(str){
              return  str.replace(/^\s*|\s*&/,"")
             },

         handleCityclick(city){
     // this.$store.commit("changeCity",city);  commit 调用store里面mutations的changeCity函数传递city
           this.changeCity(city);
           this.$router.push({path:'home'})//跳转到home首页
         },
          ...mapMutations(["changeCity"])
          //映射store里面mutations里面的changeCity函数到methods的changeCity函数
        },
       computed:{
          // getCity(){
          //   return this.$store.state.city
          // }
        // ...mapState({getCity:"city"})
       },
        watch: {
          // getCity(neww){  //如何监听state里面的数据变化？
          //   console.log("成功监听store的state的city改变"+neww)
          // },
          keyword() {
            if (timer) {
              clearTimeout(timer)
            }
            this.keyword = this.trim(this.keyword);

            if (!this.keyword) {
              this.list = [];
              return
            }

            let result = [];
            let timer = setTimeout(() => {
              for (let i in this.cities) {
                this.cities[i].forEach((value) => {
                  if (value.name.indexOf(this.keyword) > -1 || value.spell.indexOf(this.keyword) > -1) {
                    result.push(value)
                  }
                })
              }
              this.list = result;
            }, 100)

          }
        },

      mounted(){
          this.scroll=new Bscroll(this.$refs.wrapper)
      }

    }
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"

  .search
     box-sizing:border-box
     background:$bgColor
     padding:0  .1rem
     height:0.76rem
     line-height:0.76rem
     margin-top :-0.1rem
     .search-input
        box-sizing:border-box
        width:100%
        padding:0 0.1rem
        height:0.62rem
        line-height:.62rem
        border-radius:0.2rem
        color:#666
  .search-content
     overflow:hidden
     z-index:1
     position:absolute
     top:1.55rem
     left:0
     right:0
     bottom:0
     background:#eee
     .item-li
        line-height:0.62rem

        padding-left:0.2rem
        background: #ffffff
        color:#666

</style>
